@h: calc(100vh - var(--window-top));
@basecolor: #e54e4e;
@footer-h: 164rpx;
view,
text,
input,
button {
	box-sizing: border-box;
}
text {
	display: inline-block;
}
page {
	background-color: #f7f8fb;
}
image {
	display: block;
	object-fit: cover;
}
.fix-c {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.fix-c-x {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.fix-c-y {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}
.flex-center-y {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.flex-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
button {
	.flex-center();
	background: @basecolor;
	color: #ffffff;
	white-space: nowrap;
	.j-active();
	&::after {
		border: none;
	}
}
button[disabled] {
	background-color: #999999 !important;
	color: #ffffff !important;
	opacity: 1;
}
.button-hover {
	background: @basecolor;
}
// button:active {
//   position: relative;
// }
// button:active::after {
//   content: "";
//   position: absolute;
//   top: 50%;
//   left: 50%;
//   width: 0;
//   height: 0;
//   background-color: rgba(0, 0, 0, 0.2);
//   border-radius: 100%;
//   transform: translate(-50%, -50%) scale(0, 0);
//   opacity: 1;
//   transition: all 0.3s ease-out;
// }

// button:active::after {
//   width: 200px;
//   height: 200px;

//   opacity: 0;
//   transform: translate(-50%, -50%) scale(1, 1);
// }

.line-1 {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden; //溢出内容隐藏
	text-overflow: ellipsis; //文本溢出部分用省略号表示
	display: -webkit-box; //特别显示模式
	-webkit-line-clamp: 1; //行数
	line-clamp: 1;
	-webkit-box-orient: vertical; //盒子中内容竖直排列
}
.line-2 {
	// display: block;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden; //溢出内容隐藏
	text-overflow: ellipsis; //文本溢出部分用省略号表示
	display: -webkit-box; //特别显示模式
	-webkit-line-clamp: 2; //行数
	line-clamp: 2;
	-webkit-box-orient: vertical; //盒子中内容竖直排列
}
.line-3 {
	// display: block;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden; //溢出内容隐藏
	text-overflow: ellipsis; //文本溢出部分用省略号表示
	display: -webkit-box; //特别显示模式
	-webkit-line-clamp: 3; //行数
	line-clamp: 3;
	-webkit-box-orient: vertical; //盒子中内容竖直排列
}

.clearFix {
	&::after {
		content: '';
		display: block;
		clear: both;
	}
}

.j-active {
	&:active {
		opacity: 0.5;
	}
}
.j-active2 {
	&:active {
		background: rgba(0, 0, 0, 0.1);
	}
}

.bor {
	border: 1rpx solid red;
}
.bob {
	border: 1rpx solid blue;
}
.headline {
	.flex-between();
	padding: 40rpx 0 24rpx;
	.lbox {
		text {
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
		}
	}
	.rbox {
		.flex-center();
		width: 112rpx;
		height: 44rpx;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		border: 2rpx solid #d8d8d8;
		vertical-align: middle;
		.j-active();
		text {
			cursor: pointer;
			vertical-align: middle;
			font-size: 20rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #141414;
		}
	}
}
.j-sc {
	text-decoration: line-through;
}
.u-modal-btnbox {
	display: flex;
	button + button {
		margin-left: 26rpx;
	}
	button {
		width: 306rpx;
		margin: 0;
		height: 80rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	button:nth-of-type(1) {
		background: #eff1f6;
		font-size: 28rpx;
		font-family: Microsoft YaHei-Regular, Microsoft YaHei;
		font-weight: 400;
		color: #000000;
	}
	button:nth-of-type(2) {
		background: #e54e4e;
		font-size: 28rpx;
		font-family: Microsoft YaHei-Regular, Microsoft YaHei;
		font-weight: 400;
		color: #ffffff;
	}
}
.cell-item {
	position: relative;
	display: flex;
	align-items: center;
	border-top: 2rpx solid #f5f7f9;
	padding: 26rpx 0;
	label {
		display: flex;
		align-items: center;
		flex: 1;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		white-space: nowrap;
		image {
			width: 13rpx;
			height: 24rpx;
		}
	}
	.updateAvatar {
		float: right;
		position: relative;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
		image {
			.fix-c();
			width: 80rpx;
			height: 80rpx;
		}
	}
	.img-box {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		margin-top: 20rpx;
		// .flex-between();
		.img-item {
			position: relative;
			margin-right: 18rpx;
			margin-bottom: 18rpx;
			.j-active();
			image {
				width: 310rpx;
				height: 216rpx;
			}
			.scimg {
				position: absolute;

				right: -20rpx;
				top: -20rpx;
				width: 32rpx;
				height: 32rpx;
				padding: 16rpx;
			}
		}
		.img-item:nth-of-type(2n) {
			margin-right: 0;
		}
	}
	text {
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
	}
	input {
		flex: 1;
		margin-right: 16rpx;
		text-align: right;
		font-size: 28rpx;
		color: #000000;
		// .bor();
	}
	& > image {
		width: 13rpx;
		height: 24rpx;
	}
}
.sex-box {
	display: flex;
	width: 750rpx;
	padding: 64rpx 32rpx;
	background: #ffffff;
	border-radius: 8rpx 8rpx 0rpx 0rpx;
	.item-sex + .item-sex {
		margin-left: 18rpx;
	}
	.item-sex {
		.flex-center();
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		border: 1rpx solid @basecolor;
		font-size: 28rpx;
		color: @basecolor;
		.j-active();
	}
	.active {
		background: @basecolor;
		color: #ffffff;
	}
}
.filtrate {
	display: flex;
	align-items: center;
	height: 88rpx;
	background: #ffffff;

	.item {
		position: relative;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		&:before {
			content: '';
			.fix-c-x();
			bottom: 0;
			width: 0;
			height: 4rpx;
			background: #e54e4e;
			border-radius: 2rpx 2rpx 2rpx 2rpx;
			transition: 0.1s all;
		}
		.sximg {
			&::after {
				.fix-c-y();
				left: 0;
				content: '';
				height: 30rpx;
				border-left: 2rpx solid #c8c8c8;
			}
			margin-right: 8rpx;
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
		text {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
		}
		.glimg {
			margin-left: 6rpx;
			image + image {
				margin-top: 4rpx;
			}
			image {
				width: 10rpx;
				height: 10rpx;
			}
		}
	}
	.active {
		&:before {
			content: '';
			.fix-c-x();
			bottom: 0;
			width: 2em;
			height: 6rpx;
			background: #e54e4e;
			border-radius: 3rpx;
		}
	}
}
.sc {
	text-decoration: line-through;
	color: #999999 !important;
}

	@keyframes shake {
		0% {
			transform: translateX(0);
		}
		25% {
			transform: translateX(-10px);
		}
		50% {
			transform: translateX(10px);
		}
		75% {
			transform: translateX(-10px);
		}
		100% {
			transform: translateX(0);
		}
	}